import {defineComponent, ref, watch, CSSProperties} from 'vue'
import { usePrefix } from '@pg/prototypes'
import cls from 'classnames'
import './styles.less'

export interface ICornerInputProps {
  className?: string
  style?: CSSProperties
  value?: string
  onChange?: (value: string) => void
}

export const CornerInput = defineComponent({
  props: ['value', 'className', 'style', 'onChange'],
  setup(props) {
    const prefix = usePrefix('corner-input')
    const current = ref(props.value)
    watch(() => props.value, (newVal) => {
      if (!newVal) {
        current.value = 'all'
      }
    })
    const createCellProps = (type: string) => ({
      className: cls(prefix + '-cell', { active: current.value === type }),
      onClick() {
        current.value = type
        props.onChange?.(type)
      },
    })
    return (
      <div class={cls(prefix, props.className)} style={props.style}>
        <div class={prefix + '-column'}>
          <div {...createCellProps('topLeft')}>┏</div>
          <div {...createCellProps('bottomLeft')}>┗</div>
        </div>
        <div class={prefix + '-column'}>
          <div {...createCellProps('all')}>╋</div>
        </div>
        <div class={prefix + '-column'}>
          <div {...createCellProps('topRight')}>┓</div>
          <div {...createCellProps('bottomRight')}>┛</div>
        </div>
      </div>
    )
  },
})
